<template >
  <div class="SendOutCustomers-container" style="margin-top:20px">
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <el-form
        label-width="82px"
        label-position="right"
        ref="formLabelAlign"
        :model="formLabelAlign"
      >
        <el-form-item prop="city" label="城市">
          <el-select v-model="formLabelAlign.city" @change="getCompany" placeholder="请选择城市">
            <el-option label="所有" value></el-option>
            <el-option
              v-for="item in cityselectList"
              :key="item.city"
              :label="item.city"
              :value="item.city"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分公司">
          <el-select v-model="formLabelAlign.wfId" placeholder="请选择分公司">
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in fenselectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="customer" label=" 客户">
          <el-input v-model="formLabelAlign.customer" placeholder="姓名/ID/手机号均可"></el-input>
        </el-form-item>
        <!-- <el-form-item label="平台">
          <el-select v-model="formLabelAlign.sourceName2" placeholder="平台">
            <el-option label="所有" value=""></el-option>
            <el-option
              v-for="item in pingTaiList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="来源">
          <el-input v-model="formLabelAlign.sourceName" placeholder="请输入来源"></el-input>
        </el-form-item>
        <el-form-item prop="detail" label="传输状态">
          <el-select v-model="formLabelAlign.detail" placeholder>
            <el-option label="所有" value></el-option>
            <el-option label="成功" value="成功"></el-option>
            <el-option label="撞库" value="撞库"></el-option>
            <el-option label="流失" value="流失"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="ability" label="资质">
          <el-select v-model="formLabelAlign.ability" placeholder>
            <el-option label="不限" value=""></el-option>
            <el-option label="房" value="room"></el-option>
            <el-option label="车" value="car"></el-option>
            <el-option label="保单" value="socialSecurity"></el-option>
            <el-option label="寿险" value="lifeSecurity"></el-option>
            <el-option label="公积金" value="accumulation"></el-option>
            <el-option label="工资代发" value="isbankpay"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="选择资质">
          <el-select placeholder="请选择客户资质" multiple v-model="conditions">
            <el-option label="选择所有" value="all"></el-option>
            <el-option
              v-for="item in conditionList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="dayType" label="传输时间">
          <el-select
            v-model="formLabelAlign.dayType"
            id="time"
            @change="holderQuJian"
            placeholder="时间"
          >
            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value1" label="时间区间" v-show="isShow">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item id="btnList">
          <el-button
            style="background-color:#c73e3a;color:#fff"
            :disabled="disTBN"
            @click="checkCus"
            class="check"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- table -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="客户姓名" align="center"></el-table-column>
      <el-table-column prop="phone" label="客户电话" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">{{scope.row.phone}}</div>
            <apan>显示</apan>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="linesCount" label="额度" align="center"></el-table-column>
      <el-table-column prop="city" label="城市" align="center"></el-table-column>
      <el-table-column prop="sendTo" label="分公司" align="center"></el-table-column>
      <!-- <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <p class="ell">{{ scope.row.sex | PanKong }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>-->
      <el-table-column prop="detail" label="传输状态" align="center"></el-table-column>
      <el-table-column prop="sourceName2" label="来源" align="center"></el-table-column>
      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          <p class="ell">{{ scope.row.createTime | formatTime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            v-if="scope.row.detail == '成功' "
            :disabled="!editable"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="primary"
            plain
            v-else
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageConfig.currentPage"
      :page-sizes="[20 ,50, 100]"
      :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageConfig.total"
    ></el-pagination>
    <!-- 外发弹框 -->
    <el-dialog
      title="重新分发该流失客户"
      :visible.sync="centerDialogVisible"
      width="30%"
      :modal-append-to-body="false"
      center
    >
      <span>选择分公司：</span>
      <el-select v-model="formLabelAlign.wfId2" placeholder="选择发给哪个分公司">
        <!-- <el-option label="全部" value="" ></el-option> -->
        <el-option v-for="item in WaiFaFGSList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SendLossTo" :disabled="FFdisTBN">分 发</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
import { mapMutations } from "vuex";
export default {
  name: "SendOutCustomers",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      editable: false,
      cityselectList: [],
      //分公司动态生成内容
      fenselectList: [],
      WaiFaFGSList: [],
      loading: true,
      formLabelWidth: "120px",
      //未分割的完整版时间区间
      value1: "",
      //禁用按钮的状态值
      disTBN: false,
      FFdisTBN:false,
      centerDialogVisible: false,
      //时间区间隐藏状态
      isShow: false,
      pingTaiList: [],
      //页码参数
      pageConfig: {
        currentPage: 1, //当前页
        pageSize: 20, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      //时间选择生成内容
      timeList: [
        { id: "", name: "不限" },
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        // { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //外发时间区间
      teamLogForm: {
        typeZH: "当日上门", //充值类型中文
        time: "", //按时间搜索
        type: "today" //值：today，todayJinJian ，tomorrow，todayFk，danQian 默认当日
      },
      formLabelAlign: {
        city: "", //城市
        wfId: "", //外发公司
        wfId2: "", //流失客户外发公司ID
        customer3Id: "", //流失客户ID
        customer: "", //关键字
        pingTaiId: "", //平台
        sourceName2: "", //平台
        sourceName: "", //来源
        dayType: "today",
        detail: "", //客户传输状态
        ability: "", //客户资质
        beginTime: "", //开始时间
        endTime: "" //	结束时间
      },
      tableData: [],
      //提交表格的对象
      form: "",
      conditionList: [
        { value: "room", label: "房" },
        { value: "car", label: "车" },
        { value: "socialSecurity", label: "保单" },
        { value: "lifeSecurity", label: "寿险" },
        { value: "accumulation", label: "公积金" },
        { value: "isbankpay", label: "工资代发" }
      ],
      conditions: []
    };
  },
  methods: {
    //表格各行变色的方法
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    //获取客户 List的方法
    getCusList() {
      this.loading = true;
      let room = "";
      let car = "";
      let socialSecurity = "";
      let lifeSecurity = "";
      let accumulation = "";
      let isbankpay = "";
      if (this.conditions.length != 0) {
        if (this.conditions.includes("room")) {
          room = "true";
        }
        if (this.conditions.includes("car")) {
          car = "true";
        }
        if (this.conditions.includes("socialSecurity")) {
          socialSecurity = "true";
        }
        if (this.conditions.includes("lifeSecurity")) {
          lifeSecurity = "true";
        }
        if (this.conditions.includes("accumulation")) {
          accumulation = "true";
        }
        if (this.conditions.includes("isbankpay")) {
          isbankpay = "true";
        }
      }
      this.$axios
        .post(
          `/spider/WfDepartment/selOutgoingList?room=${room}&car=${car}&socialSecurity=${socialSecurity}&lifeSecurity=${lifeSecurity}&accumulation=${accumulation}&isbankpay=${isbankpay}&customer=${this.formLabelAlign.customer}&wfId=${this.formLabelAlign.wfId}&sourceName=${this.formLabelAlign.sourceName}&detail=${this.formLabelAlign.detail}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&city=${this.formLabelAlign.city}&pageSize=${this.pageConfig.pageSize}&currentPage=${this.pageConfig.currentPage}`
        )
        .then(res => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            //   this.loading = false;
            if (res.data.dataModel.total == 0) {
              this.$message("抱歉，没有找到符合搜索条件的客户");
              // this.clearAllCheck();
              this.tableData = [];
              this.pageConfig.total = 0;
              return false;
            } else {
              //   this.$message.success("已为您找到以下客户");
              this.tableData = res.data.dataModel.list;
              this.pageConfig.total = res.data.dataModel.total;
              // this.clearAllCheck();
            }
          } else {
            //   this.loading = false
            this.$message.error(res.data.messageModel.messageText);
            // this.clearAllCheck();
          }
        })
        .catch(error => {
          console.log(error);
        });
      this.loading = false;
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign.formLabelAlign[i] = "";
      }
      this.value1 = ""; //未分割的完整版时间区间
    },
    //判断时间区间是否隐藏
    holderQuJian(vId) {
      let obj = {};
      obj = this.timeList.find(item => {
        return item.id === vId; //筛选出匹配数据
      });
      if (obj.id == "customize") {
        this.isShow = true;
      } else if (obj.id == "today") {
        this.isShow = false;
        this.formLabelAlign.beginTime =
          moment(new Date()).format("YYYY-MM-DD ") + " " + "00:00:00";
        this.formLabelAlign.endTime =
          moment(new Date()).format("YYYY-MM-DD ") + " " + "23:59:59";
        this.value1 = "";
      } else if (obj.id == "yestoday") {
        this.isShow = false;
        this.formLabelAlign.beginTime =
          moment(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
          ).format("YYYY-MM-DD ") +
          " " +
          "00:00:00";
        this.formLabelAlign.endTime =
          moment(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)
          ).format("YYYY-MM-DD ") +
          " " +
          "23:59:59"; //昨日
        this.value1 = "";
      } else if (obj.id == "sevenDay") {
        this.isShow = false;
        this.formLabelAlign.beginTime =
          moment(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7)
          ).format("YYYY-MM-DD ") +
          " " +
          "00:00:00";
        this.formLabelAlign.endTime =
          moment(new Date()).format("YYYY-MM-DD ") + " " + "23:59:59";
        this.value1 = "";
      } else if (obj.id == "tomonth") {
        this.isShow = false;
        this.formLabelAlign.beginTime =
          moment(new Date()).format("YYYY-MM-01 ") + " " + "00:00:00";
        this.formLabelAlign.endTime =
          moment(new Date()).format("YYYY-MM-DD ") + " " + "23:59:59";
        this.value1 = "";
      } 
      else {
        this.isShow = false;
        this.formLabelAlign.beginTime = moment(new Date()).format("2000-01-01 ") + " " + "00:00:00";
        this.formLabelAlign.endTime = moment(new Date()).format("2100-MM-DD ") + " " + "23:59:59";
        this.value1 = "";
      }
    },
    //将按钮禁用十秒 !!!!!!!
    disButton() {
      this.disTBN = true;
      setTimeout(() => {
        this.disTBN = false;
      }, 10000);
    },
    //分页的方法
    handleSizeChange(val) {
      if (this.pageConfig.currentPage != 1) {
        this.pageConfig.currentPage = 1;
        this.pageConfig.pageSize = val;
        this.getCusList();
      } else {
        this.pageConfig.pageSize = val;
        this.getCusList();
      }
    },
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getCusList();
    },
    //获取所有城市的方法
    getAllCity() {
      this.$axios
        .get(`/spider/WfDepartment/selAllCity`)
        .then(res => {
          if (res.data.messageModel.code == 0) {
            // console.log(res.data.dataModel);
            this.cityselectList = res.data.dataModel;
          } else {
            this.$message.error(res.data.messageModel.messageText);
            this.cityselectList = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取分公司数据
    GetFengGS() {
      this.$axios
        .get(`/spider/WfDepartment/getAllDepartment`)
        .then(res => {
          this.fenselectList = res.data.dataModel;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //根据城市获取分公司数据
    getCompany(vId) {
      if (this.formLabelAlign.city != "") {
        let obj = {};
        obj = this.cityselectList.find(item => {
          return item.city === vId; //筛选出匹配数据
        });
        // 清空分公司列表
        this.fenselectList = [];
        // 再通过城市获取分公司列表
        this.$axios
          .get(`/spider/WfDepartment/getAllDepartment?city=${obj.city}`)
          .then(res => {
            this.fenselectList = res.data.dataModel;
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        this.$axios
          .get(`/spider/WfDepartment/getAllDepartment`)
          .then(res => {
            this.fenselectList = res.data.dataModel;
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    //获取平台的下拉列表
    getPingTaiList() {
      this.$axios
        .get(`/spider/source/getSourceByType?type=2`)
        .then(res => {
          // console.log(res);
          this.pingTaiList = res.data.dataModel;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //编辑客户
    handleEdit(index, row) {

      this.$axios.get(
        `/spider/WfDepartment/selByPhoneCheck?phone=${row.phone}`
      ).then(res => {
        if(res.data.messageModel.code === 0 ) {
          this.centerDialogVisible = true;
          this.formLabelAlign.wfId2 = "";
          this.formLabelAlign.customer3Id = row.id;
          // console.log(row.id);
          // 根据城市查询分公司
          this.$axios
            .get(`/spider/WfDepartment/getAllDepartment?city=${row.city}`)
            .then(res => {
              this.WaiFaFGSList = res.data.dataModel;
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          this.$message.error(res.data.messageModel.messageText)
        }
      })

    },
    //查询
    checkCus() {
      // this.disButton()
      if (this.value1 != "" && this.formLabelAlign.dayType == "customize") {
        this.formLabelAlign.beginTime = this.value1[0];
        this.formLabelAlign.endTime = this.value1[1];
        this.formLabelAlign.beginTime =
          this.formLabelAlign.beginTime + " " + "00:00:00";
        this.teamLogForm.time = this.formLabelAlign.beginTime;
        this.formLabelAlign.endTime =
          this.formLabelAlign.endTime + " " + "23:59:59";
      } else {
        this.formLabelAlign.beginTime = this.formLabelAlign.beginTime;
        this.formLabelAlign.endTime = this.formLabelAlign.endTime;
      }
      this.pageConfig.currentPage = 1;
      this.getCusList();
    },
    //外发流失到指定分公司
    SendLossTo() {
      this.FFdisTBN = true
      if (this.formLabelAlign.wfId2 == "") {
        this.$message("别着急，你还没选择要发给哪个分公司呐！");
      } else {
        this.$axios
          .post(
            `/spider/WfDepartment/rewire?customer3Id=${this.formLabelAlign.customer3Id}&wfGsId=${this.formLabelAlign.wfId2}`
          )
          .then(res => {
            if (res.data.messageModel.code == 0) {
              this.centerDialogVisible = false;
              this.$message.success("发送成功！");
              this.getCusList(); //成功刷新页面
            } else {
              this.centerDialogVisible = false;
              this.$message.error(res.data.messageModel.messageText);
            }
            this.FFdisTBN = false
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      return moment(value).format("YY-MM-DD HH:mm:ss");
    },
    PanKong(value) {
      if (value == "null" || value == null) {
        return "未知";
      }
      return value;
    },
    chongFuCount(val) {
      if (val > 1) {
        return "(" + val.toString() + ")";
      } else {
        return "";
      }
    }
  },
  created() {
    // if (window.sessionStorage.getItem("prohibitLogin") == "true") {
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    //创建存放表格的对象
    this.form = new FormData();
    //默认查询当日
    this.formLabelAlign.beginTime =
      moment(new Date()).format("YYYY-MM-DD ") + " " + "00:00:00";
    this.formLabelAlign.endTime =
      moment(new Date()).format("YYYY-MM-DD ") + " " + "23:59:59";
    //获取所有城市
    this.getAllCity();
    this.GetFengGS();
    //请求平台可选
    this.getPingTaiList();
    this.getCusList();
    // }else{
    //   this.$message.warning("请先进行登录操作！");
    //   this.$router.push("login");
    // } ;
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode
    //   if (key === 13) {
    //     component.checkCus()
    //   }
    // }
  },
  computed: {
    title() {
      return this.$store.state.common.title;
    }
  },
  watch: {
    conditions: function(val, oldval) {
      let newindex = val.indexOf("all"),
        oldindex = oldval.indexOf("all"); //获取val和oldval里all的索引,如果没有则返回-1
      if (newindex != -1 && oldindex == -1 && val.length > 1)
        //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
        this.conditions = [];
      else if (newindex != -1 && oldindex != -1 && val.length > 1)
        //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有
        this.conditions.splice(val.indexOf("all"), 1);
      // console.log(this.conditions);
    }
  },
  activated() {
    this.getCusList();
  }
};
</script>

<style  lang='scss'>
.SendOutCustomers-container {
  input.el-input__inner {
    width: 170px;
    height: 38px;
    padding-left: 10px;
  }
  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    .cell {
      padding-left: 1px;
      padding-right: 1px;
      line-height: 16px;
    }
    th {
      padding: 0;
    }
    th.is-sortable {
      .cell {
        text-align: center;
      }
    }
    .el-checkbox__inner {
      margin-left: 10px;
    }
    .warning-row {
      background: #fff;
    }
    .success-row {
      background: #d3d3d3;
    }
    td {
      //取消单元格的上下padding
      padding: 2px 0;
      border-bottom: 1px solid rgb(211, 205, 205);
      border-right: 1px dashed #d3cdcd;
    }
    .el-button--mini {
      border: 0;
      padding: 5px 15px;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.01);
    }
    .toEdit:hover {
      color: skyblue;
    }
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    width: 85px;
    padding-left: 7px;
    height: 38px !important;
  }
  //多选资质选框
  //  input.el-input__inner{
  //      height: 32px;
  //  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 38px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
    .el-form-item#btnList {
      /deep/.el-form-item__content {
        margin-left: 20px !important;
      }
    }
  }
  .check {
    margin-left: 22px;
    padding: 10px 20px;
  }
  .ell {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    word-break: normal;
    text-indent: -2em;
    margin: 0 0 0 2em;
    line-height: 1.2;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination {
    display: inline-block;
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>